<!doctype html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-demo="http://www.w3.org/1999/xhtml"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>自定义指令-params-2</title>
</head>
<body>

    <div id="example-6">
        <div v-demo v-bind:a="hello world"></div>
    </div>
    <script src="../lib/vue.js"></script>
<script>
    /*
    * vue.js指令中自定义指令可以接收一个params数组，指定一个特性列表，Vue编辑器将自动提取绑定元素的这些特性
    * 此API也支持动态属性。this.params[key]会自动保持更新，还可以指定一个回调，在值变化时调用
    * */
    Vue.directive('demo', {
        params:['a'],
        paramsWatcher : {
          a : function (val, oldVal) {
              console.log(val);
          }
        },
        bind:function () {
            console.log(this);
            console.log(this.params.a);
        },
        update:function () {

        },
        unbind:function () {

        }
    })
    var exampleVm = new Vue({
        el : '#example-6',
        data : {
            msg : 'welcome to javascript world!'
        }
    })
</script>
</body>
</html>